<template>
  <el-dialog
    title="登录/注册"
    :visible.sync="visible"
    width="800px"
  >
    <div class="login-wrap">
      <div class="guarantee-wrap">
        <div
          v-for="(item, index) in guaranteeList"
          :key="index"
          class="block"
        >
          <div class="img-wrap">
            <img :src='`${$baseImgUrl}home/${item.img}`'>
          </div>
          <div class="description">
            <p class="num-wrap">
              <b>{{item.num}}</b>{{item.unit}}
            </p>
            <p>{{item.description}}</p>
          </div>
        </div>
      </div>
      <div class="login-page">
        <el-tabs type="border-card" :stretch="true" v-model="activeTabName">
          <el-tab-pane label="登录" class="login-container" name="login">
            <el-form ref="loginForm" :rules="loginRules" :model="loginForm" label-width="80px">
              <el-form-item prop="account" label-width="0">
                <el-input v-model="loginForm.account" placeholder="手机号/用户名"></el-input>
              </el-form-item>
              <el-form-item prop="password" label-width="0">
                <el-input v-model="loginForm.password" placeholder="密码"></el-input>
              </el-form-item>
              <div class="btn-wrap">
                <el-button type="primary" @click="login" :loading="loading">{{loginText}}</el-button>
              </div>
              <div class="login-footer">
                <span @click="toRegist">立即注册</span>
                <span @click="forgetPwd">忘记密码？</span>
              </div>
            </el-form>
          </el-tab-pane>
          <el-tab-pane label="注册" class="regist-container" name="regist">
            <el-form ref="registForm" :rules="registRules" :model="registForm" label-width="80px">
              <el-form-item prop="type" label-width="80px" label="用户类型">
                <el-radio-group v-model="registForm.type">
                  <el-radio :label="1">企业用户</el-radio>
                  <el-radio :label="2">普通用户</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item prop="phone" label-width="0">
                <el-input v-model="registForm.phone" placeholder="手机号"></el-input>
              </el-form-item>
              <el-form-item prop="password" label-width="0">
                <el-input v-model="registForm.password" type="password" placeholder="密码"></el-input>
              </el-form-item>
              <el-form-item prop="repeatPwd" label-width="0">
                <el-input v-model="registForm.repeatPwd" type="password" placeholder="确认密码"></el-input>
              </el-form-item>
              <el-form-item prop="code" label-width="0">
                <el-input v-model="registForm.code" placeholder="请输入验证码">
                  <template slot="append">{{registForm.baseCode}}</template>
                </el-input>
              </el-form-item>
              <div class="btn-wrap">
                <el-button type="primary" @click="regist" :loading="loading">{{registText}}</el-button>
              </div>
              <div class="login-footer">
                <span @click="toLogin">立即登录</span>
                <span @click="forgetPwd">忘记密码？</span>
              </div>
            </el-form>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
  </el-dialog>
</template>

<script>
import { getCode } from '../request/api';

export default {
  name: 'Login',
  data() {
    return {
      visible: true,
      loading: false,
      loginForm: {
        account: '',
        password: ''
      },
      loginRules: {
        account: [{ required: true, message: '请输入手机号或用户名', trigger: 'blur' }],
        password: [{ required: true, message: '请输入密码', trigger: 'blur' }]
      },
      registForm: {
        type: 1,
        phone: '',
        password: '',
        code: ''
      },
      registRules: {
        phone: [{
          required: true,
          message: '请绑定手机号',
          trigger: 'blur'
        }, {
          trigger: 'blur',
          validator: this.validatePhone
        }],
        name: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
        pwd: [{ required: true, message: '请输入密码', trigger: 'blur' }],
        repeatPwd: [{
          required: true,
          message: '两次输入密码不一致',
          trigger: 'blur',
          validator: this.validateRepeatPwd
        }],
        code: [{
          required: true,
          trigger: 'blur',
          validator: this.validateCode
        }]
      },
      guaranteeList: [
        {
          img: '/warrant01.png', num: 9123, unit: '条', description: '累计维权'
        },
        {
          img: '/warrant01.png', num: 9115, unit: '条', description: '已处理维权'
        },
        {
          img: '/warrant01.png', num: 8, unit: '条', description: '待处理维权'
        },
        {
          img: '/warrant01.png', num: 732.1, unit: '万', description: '为玩家挽回金额'
        }
      ],
      activeTabName: 'login'
    };
  },
  computed: {
    isRegist() {
      return this.$store.state.showRegist;
    },
    loginText() {
      return this.loading ? '登录中' : '登录';
    },
    registText() {
      return this.loading ? '注册中' : '注册';
    }
  },
  created() {
    this.getCode();
    this.activeTabName = this.isRegist ? 'regist' : 'login';
  },
  methods: {
    validatePhone(rule, value, cb) {
      const phone = value.replace(/\s/g, '');
      const regs = /^((13[0-9])|(17[0-1,6-8])|(15[^4,\\D])|(18[0-9]))\d{8}$/;
      if (value.length === 0) {
        cb();
      } else if (!regs.test(phone)) {
        cb(new Error('手机号输入不合法'));
      } else {
        cb();
      }
    },
    validateRepeatPwd(rule, value, cb) {
      if (value === '') {
        cb(new Error('请再次输入密码'));
      } else if (value !== this.registForm.password) {
        cb(new Error('两次输入密码不一致'));
      } else {
        cb();
      }
    },
    validateCode(rule, value, cb) {
      if (!this.registForm.code) {
        return cb(new Error('请输入验证码'));
      }
      if (this.registForm.baseCode != this.registForm.code) {
        return cb(new Error('验证码错误'));
      }
      return cb();
    },
    login() {
      this.$refs.loginForm.validate(valid => {
        if (valid) {
          if (this.loading) {
            return;
          }
          this.loading = true;
          this.$store.dispatch('login', this.loginForm).then(res => {
            this.$message({
              type: 'success',
              message: '登录成功'
            });
            this.$store.commit('SET_RELOAD', false);
            this.$nextTick(() => {
              this.$store.commit('SET_RELOAD', true);
            });
          });
          this.loading = false;
        }
      });
    },
    regist() {
      this.$refs.registForm.validate(valid => {
        if (valid) {
          if (this.loading) {
            return;
          }
          this.loading = true;
          this.$store.dispatch('regist', this.registForm).then(() => {
            this.$message({
              type: 'success',
              message: '注册成功'
            });
          });
        }
      });
    },
    toRegist() {
      this.activeTabName = 'regist';
    },
    toLogin() {
      this.activeTabName = 'login';
    },
    forgetPwd() {
      this.$message('暂不支持该功能！');
    },
    getCode() {
      if (!this.isRegist) {
        return;
      }
      this.registForm.sessionid = '111';
      getCode({ sessionid: '111' }).then(res => {
        this.registForm.baseCode = res;
      });
    }
  },
  watch: {
    'registForm.type'() {
      this.getCode();
    },
    visible(val) {
      if (val) {
        return;
      }
      this.visible = true;
      if (!this.$store.state.token) {
        this.$store.commit('SHOW_LOGIN', true);
      }
    }
  }
};
</script>

<style lang="less" scoped>
  .login-wrap {
    display: flex;
    min-height: 300px;
    .guarantee-wrap {
      display: flex;
      flex-wrap: wrap;
      width: 360px;
      justify-content: space-between;
      .block {
        width: 48%;
        img {
          width: 100%;
        };
      }
    }
    .login-page {
      display: flex;
      flex: 1;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding-left: 20px;
      height: 100%;
      .login-container {
        padding: 0 20px;
        .title {
          text-align: center;
        }
      }
      .login-footer {
        display: flex;
        justify-content: space-between;
        margin-top: 10px;
        span {
          color: blue;
          cursor: pointer;
        }
      }
    }
    .btn-wrap {
      text-align: center;
      button {
        width: 100%;
      }
    }
  }
  .login-wrap /deep/ .el-tabs--border-card {
    width: 100%;
  }
</style>
